<template>
    <div>
        <div class="top box">
            <div class="companyName">欢迎光临山东省医学情报协会网站</div>
            <div>{{currDate|formateDate}}</div>
            <div>
                <el-input class="input-with-select" placeholder="请输入内容">
                    <el-button icon="el-icon-search" slot="append"></el-button>
                </el-input>
            </div>
        </div>

        <div class="banner">
            <img src="../../assets/images/logoBg.png" class="logoBg">
            <img src="../../assets/images/fudiao.png" class="fudiao">
            <div class="text">
                <h1>山东省医学情报图书协会</h1>
                <h2>SHANDONG MEDICAL INFORMATION ASSICIATION</h2>
            </div>
            <!--导航 -->
            <div class="dhh">
                <div class="dh">

                    <el-menu  class="el-menu-demo" mode="horizontal" background-color="#037edb" text-color="#fff" active-text-color="#fff">
                        <el-menu-item index=""><router-link to="/index/bottom">网站首页</router-link></el-menu-item>

                        <el-menu-item index='' ><router-link to="/index/tzgg">通知公告</router-link></el-menu-item>
                        <el-menu-item index="4"><router-link to="/index/newsdongtai">新闻动态</router-link></el-menu-item>
                        <el-menu-item index="5"><router-link to="/index/tuijianwenzhang">推荐文章</router-link></el-menu-item>
                        <el-menu-item index="6" ><router-link to="/index/tzgg">专家展示</router-link></el-menu-item>
                        <el-menu-item index="7"><router-link to="/index/tzgg">精彩评论</router-link></el-menu-item>
                        <el-menu-item index='8' ><router-link to="/index/message">我要留言</router-link></el-menu-item>
                    </el-menu>

                </div>
            </div>

        </div>
    </div>
</template>

<script>
    export default {
        name: "indextop",
        data() {
            return {

                currDate: new Date(),

            }
        },
        filters: {
            formateDate: function (value) {
                var d = new Date(value);
                var y = d.getFullYear();
                var m = d.getMonth() + 1;
                var day = d.getDate();
                var wd = d.getDay();
                switch (wd) {
                    case 1:wd="一";break;
                    case 2:wd="二";break;
                    case 3:wd="三";break;
                    case 4:wd="四";break;
                    case 5:wd="五";break;
                    case 6:wd="六";break;
                    default:break;
                }
                return y + '年' + m + '月' + day + '日 星期' + wd;
            }
        },
    }
</script>

<style scoped lang="less">
    .top {
        width: 1200px;
        height: 40px;
        margin: 0 auto;
    }

    .box {
        display: flex;
        justify-content: space-between;
        line-height: 40px;
        font-size: 16px;

    .companyName {
        width: 60%;
        text-align: left;
    }
    }

    .banner{
        height: 230px;
        width: 100%;
        position: relative;
    .logoBg{
        width: 100%;
        height: 230px;
    }
    .fudiao{
        position: absolute;
        right: 200px;
        top: 0px;
    }
    .text{
        position: absolute;
        top:30px;
        left: 100px;
    }
    .text h1 {
        padding-top: 40px;
        line-height: 80px;
        font-size: 38px;
        color: dodgerblue;
        text-shadow: #fff 2px -2px 1px,
        #fff 2px 2px 1px,
        #fff -2px 2px 1px,
        #fff -2px -2px 1px;
    }
    .text h2 {
        padding-top: 0px;
        line-height: 20px;
        color: #567e9c;
        font-size: 18px;
        font-weight: 200;
        text-shadow: #fff 1px -1px 1px,
        #fff 1px 1px 1px,
        #fff -1px 1px 1px,
        #fff -1px -1px 1px;
    }
    }
    .dhh{
        width: 100%;
        height: 60px;
        position: absolute;
        bottom: 0px;
    }
    .dh{
        margin: 0 auto;
        width: 1200px;
    .el-menu-demo{
        font-size: 16px;
    }
    .el-menu-item{
        font-size: 18px;
        padding-right: 0;
        width: 14%;
    }
    .el-menu-item:after{
        content: "";
        display: inline-block;
        height: 30px;
        margin-top:15px ;
        border-right: 1px solid #fff;
        float: right;
        color: #666666;
    }
    .el-menu-item:last-child:after{
        content: "";
        border: none;

    }
    }

</style>